<template>
  <div class="food" v-show="foodFlag" transition="move" v-el:food>
    <div class="food-container">
      <mt-header class="top-header" fixed title="商品详情页">
        <mt-button @click="foodHide" icon="back" slot="left"></mt-button>
      </mt-header>
      <div class="food-img">
        <img :src="food.image" alt="">
      </div>
      <div class="content">
        <div class="top">
          <div class="title">{{ food.name }}</div>
          <div class="extra">
            <span>月销{{ food.sellCount }}份</span>
            <span>好评率{{ food.rating }}%</span>
          </div>
          <div class="price">
            <span class="now">￥{{ food.price }}</span>
            <span v-show="food.oldPrice" class="old">￥{{ food.oldPrice }}</span>
            <div class="controll-wrapper">
              <controll :food="food"></controll>
            </div>
            <mt-badge class="add-cart" type="primary" size="small" @click.stop.prevent="addFirst" v-show="!this.food.count || this.food.count === 0" transition="fade">加入购物车</mt-badge>
          </div>
        </div>
        <split-chunk v-show="food.info"></split-chunk>
        <div class="info" v-show="food.info">
          <h2 class="title">商品介绍</h2>
          <p class="desc">{{ food.info }}</p>
        </div>
        <split-chunk></split-chunk>
        <div class="comment">
          <h2 class="title">商品评价</h2>
          <div class="ratingselect-wrapper">
            <ratingselect :select-type="selectType" :only-content="onlyContent" :desc="description" :ratings="food.ratings"></ratingselect>
          </div>
          <div class="rating-wrapper">
            <ul v-show="food.ratings && food.ratings.length">
              <li class="rating-item" v-for="rating in food.ratings" v-show="needShow(rating.rateType, rating.text)">
                <div class="time">{{ rating.rateTime | formatDate }}</div>
                <div class="user">
                  <span class="name">{{ rating.username }}</span>
                  <img class="avatar" width="12" height="12" :src="rating.avatar" />
                </div>
                <p class="text">
                  <i :class="{'icon-thumb_down' : rating.rateType === 1, 'icon-thumb_up' :rating.rateType === 0}"></i>
                  <span>{{ rating.text }}</span>
                </p>
              </li>
            </ul>
            <div class="no-rating" v-show="!food.ratings || !food.ratings.length">暂无评价</div>
          </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import BScroll from 'better-scroll'
  import Controll from 'components/cartcontroll/cartcontroll'
  import Ratingselect from 'components/ratingselect/ratingselect'

  import SplitChunk from 'components/split/split'
  import { formatDate } from 'assets/scripts/date'
  import { Header, Button, Badge} from 'mint-ui'

  const ALL = 2
  export default {
    props: {
      food: {
        type: Object
      }
    },
    data() {
      return {
        foodFlag: false,
        selectType: ALL,
        onlyContent: false,
        description: {
          all: '全部',
          positive: '推荐',
          negative: '吐槽'
        }
      }
    },
    methods: {
      foodShow() {
        this.foodFlag = true
        this.selectType = 2
        this.onlyContent = true
        this.$nextTick(() => {
          if(!this.scroll) {
            this.scroll = new BScroll(this.$els.food, {
              click: true
            })
          }
          else{
            this.scroll.refresh()
          }
        })
      },
      foodHide() {
        this.foodFlag = false
      },
      addFirst(event) {
        if(!event._constructed) {
          return
        }
        this.$dispatch('cart.add', event.target)
        Vue.set(this.food, 'count', 1)
      },
      needShow(type, text) {
        if(this.onlyContent && !text) {
          return false
        }
        if(this.selectType === ALL){
          return true
        }
        else {
          return type === this.selectType
        }
      }
    },
    events: {
      'ratingtype.select' (type) {
        this.selectType = type
        this.$nextTick(function() {
          this.scroll.refresh()
        })
      },
      'content.toggle' (content) {
        this.onlyContent = content
        this.$nextTick(function() {
          this.scroll.refresh()
        })
      }
    },
    filters: {
      formatDate(time) {
        let date = new Date(time)
        return formatDate(date, 'yyyy-MM-dd hh:mm')
      }
    },
    components: {
      Controll,
      Ratingselect,
      'split-chunk': SplitChunk
    }
  }
</script>

<style lang="stylus" ref="stylesheet/stylus">
  .food
    position: fixed
    left: 0
    top: 0
    bottom: 48px
    z-index: 30
    width: 100%
    overflow: hidden
    background-color: #fff
    &.move-transition
      opacity: 1
      transition: all .3s linear
      transform: translate3d(0, 0, 0)
    &.move-enter ,&.move-leave
      opacity: 0
      transform: translate3d(100%, 0, 0)
    .top-header
      position: fixed
      top: 0
      left: 0
      height: 40px
      line-height: 40px
      background-color: rgba(0, 0, 0, .5)
      color: #fff
      font-weight: bold
      border-bottom: 1px solid rgba(7, 17, 27, .1)
      .mintui-back
        font-size: 10px
    .food-container
      .food-img
        position: relative
        width: 100%
        height: 0
        padding-top: 100%
        img
          position: absolute
          left: 0
          top: 0
          width: 100%
          height: 100%
      .content
        border-bottom: 1px solid rgba(0,0, 0,.1)
        .title
          margin-bottom: 6px
          font-size: 14px
          line-height: 14px
          color: rgb(7, 17, 27)
        .top, .info, .comment
          padding: 18px
        .top
          .title
            font-weight: 700
          .extra
            margin-bottom: 8px
            font-size: 10px
            color: rgb(147, 153, 159)
          .price
            position: relative
            height: 30px
            padding-top: 18px
            .now
              margin-right: 8px
              font-size: 14px
              color: rgb(240, 20, 20)
              font-weight: 700
            .old
              text-decoration: line-through
              font-size: 10px
              color: rgb(147, 153, 159)
            .controll-wrapper
              position: absolute
              right: 12px
              top: 9px
            .add-cart
              position: absolute
              right: 18px
              top: 9px
              padding: 8px 15px
              border-radius: 15px
              &.fade-transition
                opacity: 1
                transition: all .4s
              &.fade-enter,&.fade-leave
                opacity: 0
                transition: all .4s
        .info
          .desc
            padding: 0 8px
            font-size: 12px
            line-height: 24px
            color: rgb(77, 85, 93)
        .comment
          .rating-item
            padding: 16px 0
            border-bottom: 1px solid rgba(7, 17, 27, .1)
            .time, .user
              display: inline-block
              font-size: 10px
              line-height: 12px
            .time
              float: left
              color: rgb(147, 153, 159)
            .user
              float: right
              color: rgb(7, 17, 27)
              .avatar
                margin-left: 6px
                border-radius: 50%
            .text
              clear: both
              vertical-align: top
              padding-top: 6px
              font-size: 12px
              line-height: 16px
              color: rgb(7, 17, 27)
              i
                margin-right: 4px
                color: rgb(147, 153, 159)
                &.icon-thumb_up
                  color: rgb(0, 160, 220)
          .no-rating
            padding: 16px 0
            font-size: 14px
            color: rgb(147, 153, 159)  
</style>